<!DOCTYPE html>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>系统首页</title>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link th:href="@{favicon.ico}" rel="shortcut icon"/>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/animate.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/style.min.css}" rel="stylesheet"/>
    <link th:href="@{/css/skins.css}" rel="stylesheet"/>
    <link th:href="@{/ruoyi/css/ry-ui.css?v=4.7.2}" rel="stylesheet"/>
    <th:block th:include="include :: header('系统首页')" />
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        #container {
            position: relative;
            padding: 20px;
            height: 50px;
        }

        #left_side {
            position: absolute;
            top: 20px;
            left: 20px;
            border: solid 0px #e7eaec;
            width: 200px;
            height: 100%;
        }

        #content {
            margin: 0px 210px 0px 210px;
            border: solid 0px #e7eaec;
            height: 100%;
            font-size:35px;
            text-align: center;
        }

        #right_side {
            position: absolute;
            top: 20px;
            right: 20px;
            border: solid 0px #e7eaec;
            width: 170px;
            height: 100%;
            font-size: medium;
            text-align: center;
        }
        .area {
            height: 700px;
            margin: 20px 20px 20px 20px;
        }
        .areatop {
            height: 350px;
            background-color: white;
            padding: 20px;
        }
        .areabottom {
            height: 350px;
            background-color: white;
            padding: 20px;
        }

        .areacontent {
            display: inline-block;
            height: 100%;
            border-radius: 3px;
            border: solid 1px gray;
        }

        .area1{
            width:calc( calc(100% - 10px)/8 );
            position: relative;
        }
        .area2{
            width:calc(calc(100% - 20px) /4);
            position: relative;
        }
        .area3{
            width: calc(calc(100% - 40px) /2);
            position: relative;
        }
        .areacontentbottom{
            position:absolute;
            height: 70px;
            width: 100%;
            background-color: transparent;
            border-top: solid 1px #e7eaec;
            bottom: 0px;
            line-height: 70px;
            text-align: center;
            font-weight: 800;
            font-family:Arial,sans-serif;
        }
        .areacontenttop{
            position:relative;
            height: calc(100% - 72px);
            padding: 0px;
            width: 100%;
            top: 0px;
        }
        .areacontenttopitem{
            height: calc(100% - 10px);
            background-color: white;
            position: absolute;
            border: solid 1px #e7eaec;
            top: 5px;
        }
        .title_head{
            position:absolute;
            text-align: left;
            height: 30px;
            padding: 0px;
            top: 5px;
            width: 100% ;
        }
        .info{
            position:absolute;
            height: calc(100% - 45px);
            padding: 0px;
            top: 35px;
            width: 100% ;
        }
        .cellhead{
            width: 50%;height: 85px;float: left
        }
        .cell{
            border-radius: 3px;
            margin: 0 auto;
            width:60px;
            height:60px;
            background-color: gray;
            text-align: center;
            line-height: 60px;
            color: white;
        }
        .processinfo{
            position: absolute;
            top: 5px;
            right: 2px;
            width: 60px;
            height: 20px;
            line-height: 20px;
            border: solid 1px #e7eaec;
            border-radius: 3px;
            background-color: green;
            text-align: center;
            color: white;
            font-size: small;
        }
        p{
            text-align: center;
            margin: 0px;
        }
    </style>
</head>
<body class="gray-bg">
<div>
    <div id="container">
        <div id="left_side">left_side</div>
        <div id="content">集成管控系统</div>
        <div id="right_side"><button type="button" class="btn btn-outline btn-primary" onclick="Goto_mainconsole()" >总控台</button></div>
    </div>
    <div class="area">
        <div class="areatop">
            <div class="areacontent area1" style="background-color: rgb(204,153,153);">
                <div class="areacontenttop">
                    <div class="areacontenttopitem" style="margin-left: 5px;width: calc(100% - 10px);">
                        <div class="title_head"  >模拟装配实验单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="areacontentbottom">总装实验区</div>
            </div>
            <div class="areacontent area2" style="background-color: rgb(255,204,153);">
                <div class="areacontenttop">
                    <div class="areacontenttopitem" style="margin-left: 5px;width:calc(50% - 5px);">
                        <div class="title_head">C型左半装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="areacontenttopitem" style="width:calc(50% - 5px);left: 50%">
                        <div class="title_head">C型右半装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="areacontentbottom">大部件装配区</div>
            </div>
            <div class="areacontent area1" style="background-color: rgb(255,204,102);">
                <div class="areacontenttop">
                    <div class="areacontenttopitem" style="margin-left: 5px;width: calc(100% - 10px);">
                        <div class="title_head"  >自动钻铆单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="areacontentbottom">自动化设备区</div>
            </div>
            <div class="areacontent area3" style="background-color: rgb(255,204,204);">
                <div class="areacontenttop">
                    <div class="areacontenttopitem" style="margin-left: 5px;width: calc(25% - 5px); ">
                        <div class="title_head">外涵内层L装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="areacontenttopitem" style="width:25%;left:25%;">
                        <div class="title_head">外涵内层R装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="areacontenttopitem" style="width: 25%;left:50%">
                        <div class="title_head">下导轨梁L装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="areacontenttopitem" style="width:calc(25% - 5px);left:75%">
                        <div class="title_head">下导轨梁R装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="areacontentbottom">组件装配区</div>
            </div>
        </div>
        <div class="areabottom">
            <div class="areacontent area1" style="background-color: rgb(255,204,204);">
                <div class="areacontenttop">
                    <div class="areacontenttopitem" style="margin-left: 5px;width: calc(100% - 10px);">
                        <div class="title_head"  >承力框装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="areacontentbottom">组件装配区</div>
            </div>
            <div class="areacontent area2" style="background-color: rgb(204,255,204);">
                <div class="areacontenttop">
                    <div class="areacontenttopitem" style="margin-left: 5px;width:calc(50% - 5px);">
                        <div class="title_head">移动外罩L装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="areacontenttopitem" style="width:calc(50% - 5px);left: 50%">
                        <div class="title_head">移动外罩R装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="areacontentbottom">部件装配区</div>
            </div>
            <div class="areacontent area1" style="background-color: rgb(255,204,102);">
                <div class="areacontenttop">
                    <div class="areacontenttopitem" style="margin-left: 5px;width: calc(100% - 10px);">
                        <div class="title_head"  >自动制孔单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="areacontentbottom">自动化设备区</div>
            </div>
            <div class="areacontent area2" style="background-color: rgb(255,204,204);">
                <div class="areacontenttop">
                    <div class="areacontenttopitem" style="margin-left: 5px;width:calc(50% - 5px);">
                        <div class="title_head">主承力框架L装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="areacontenttopitem" style="width:calc(50% - 5px);left: 50%">
                        <div class="title_head">主承力框架R装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="areacontentbottom">组件装配区</div>
            </div>
            <div class="areacontent area2" style="background-color: rgb(204,255,204);">
                <div class="areacontenttop">
                    <div class="areacontenttopitem" style="margin-left: 5px;width:calc(50% - 5px);">
                        <div class="title_head">扭矩盒L装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="areacontenttopitem" style="width:calc(50% - 5px);left: 50%">
                        <div class="title_head">扭矩盒R装配单元</div>
                        <div class="processinfo">
                            加工中
                        </div>
                        <div class="info">
                            <div class="cellhead">
                                <p>产品编号</p>
                                <div class="cell">
                                    1
                                </div>

                            </div>
                            <div class="cellhead">
                                <p>产品批次号</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>当前工序</p>
                                <div class="cell">
                                    3
                                </div>
                            </div>
                            <div class="cellhead">
                                <p>加工时长</p>
                                <div class="cell">
                                    1
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="areacontentbottom">部件装配区</div>
            </div>
        </div>
    </div>

</div>


<th:block th:include="include :: footer" />
<!-- 全局js -->
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/jquery.contextMenu.min.js}"></script>
<script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
<script th:src="@{/ruoyi/js/ry-ui.js?v=4.7.2}"></script>
<script th:src="@{/ruoyi/js/common.js?v=4.7.2}"></script>
<script th:src="@{/ruoyi/index.js?v=20201208}"></script>
<script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
<script th:inline="javascript">

    var ctx = [[@{/}]];
    function Goto_mainconsole() {
        window.location = ctx + 'generalControl/MainConsole';
    }
</script>
</body>
</html>

